<template>
    <div style="width: 100%;height: 100vh;color:var(--color-neutral-10);margin: 0 auto">
      <div style="padding: 40px 0 0 0;margin: 0 auto;max-width: 1550px;width: 90%;">
        <p style="font-size: 24px;font-weight: bold;margin-bottom: 20px">操作数据库</p>
      </div>
      <div style="width: 100%;height: calc(100% - 96px);position: relative;overflow-y: auto;padding-bottom: 60px;">
        <div v-if="data.show" style="width: 90%;height: 100%;margin: 0 auto;max-width: 1550px;padding-top: 20px;">
                <v-select style="width: 200px;margin-right: 15px;display: inline-block;" variant="outlined" label="method" :items="['insert','delete','update','select']" v-model="data.statement.method"></v-select>
                <v-text-field v-model="data.statement.table" label="table" variant="outlined" style="width: 200px;"></v-text-field>
                <div v-if="data.statement.method=='insert'" style="margin-bottom: 20px;border:1px solid var(--color-neutral-3);padding:10px 10px;">
                    <p>values</p>
                    <button @click="data.statement.values = undefined;valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Undefined</button>
                    <button @click="data.statement.values = {};valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To JSON</button>
                    <button @click="data.statement.values = [];valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Array</button><br>
                    <div style="display: inline-block;background-color: white;border-radius: 5px;padding: 10px 10px;">
                        <dataEditor @dataChanged="dataEDTchanged" :key-name-or-index="'values'" :data="data.statement.values"></dataEditor>
                    </div>
                </div>
                <div v-if="data.statement.method!='insert'" style="margin-bottom: 20px;border:1px solid var(--color-neutral-3);padding:10px 10px;">
                    <p>conditions</p>
                    <button @click="data.statement.conditions = undefined;valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Undefined</button>
                    <button @click="data.statement.conditions = {};valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To JSON</button>
                    <button @click="data.statement.conditions = [];valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Array</button><br>
                    <div style="display: inline-block;background-color: white;border-radius: 5px;padding: 10px 10px;">
                        <dataEditor @dataChanged="dataEDTchanged" :key-name-or-index="'conditions'" :data="data.statement.conditions"></dataEditor>
                    </div>
                </div>
                <div v-if="data.statement.method=='update'" style="margin-bottom: 20px;border:1px solid var(--color-neutral-3);padding:10px 10px;">
                    <p>set</p>
                    <button @click="data.statement.set = undefined;valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Undefined</button>
                    <button @click="data.statement.set = {};valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To JSON</button>
                    <button @click="data.statement.set = [];valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Array</button><br>
                    <div style="display: inline-block;background-color: white;border-radius: 5px;padding: 10px 10px;">
                        <dataEditor @dataChanged="dataEDTchanged" :key-name-or-index="'set'" :data="data.statement.set"></dataEditor>
                    </div>
                </div>
                <div v-if="data.statement.method=='select'" style="margin-bottom: 20px;border:1px solid var(--color-neutral-3);padding:10px 10px;">
                    <p>columns</p>
                    <button @click="data.statement.columns = undefined;valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Undefined</button>
                    <button @click="data.statement.columns = {};valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To JSON</button>
                    <button @click="data.statement.columns = [];valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Array</button><br>
                    <div style="display: inline-block;background-color: white;border-radius: 5px;padding: 10px 10px;">
                        <dataEditor @dataChanged="dataEDTchanged" :key-name-or-index="'columns'" :data="data.statement.columns"></dataEditor>
                    </div>
                </div>
                <div v-if="data.statement.method=='select'" style="margin-bottom: 20px;border:1px solid var(--color-neutral-3);padding:10px 10px;">
                    <p>sortBy</p>
                    <button @click="data.statement.sortBy = undefined;valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Undefined</button>
                    <button @click="data.statement.sortBy = {};valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To JSON</button>
                    <button @click="data.statement.sortBy = [];valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Array</button><br>
                    <div style="display: inline-block;background-color: white;border-radius: 5px;padding: 10px 10px;">
                        <dataEditor @dataChanged="dataEDTchanged" :key-name-or-index="'sortBy'" :data="data.statement.sortBy"></dataEditor>
                    </div>
                </div>
                <div v-if="data.statement.method=='select'" style="margin-bottom: 20px;border:1px solid var(--color-neutral-3);padding:10px 10px;">
                    <p>pageSize</p>
                    <button @click="data.statement.pageSize = undefined;valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Undefined</button>
                    <button @click="data.statement.pageSize = {};valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To JSON</button>
                    <button @click="data.statement.pageSize = [];valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Array</button><br>
                    <div style="display: inline-block;background-color: white;border-radius: 5px;padding: 10px 10px;">
                        <dataEditor @dataChanged="dataEDTchanged" :key-name-or-index="'pageSize'" :data="data.statement.pageSize"></dataEditor>
                    </div>
                </div>
                <div v-if="data.statement.method=='select'" style="margin-bottom: 20px;border:1px solid var(--color-neutral-3);padding:10px 10px;">
                    <p>groupBy</p>
                    <button @click="data.statement.groupBy = undefined;valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Undefined</button>
                    <button @click="data.statement.groupBy = {};valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To JSON</button>
                    <button @click="data.statement.groupBy = [];valueChanged();" style="padding: 5px 5px;margin-right: 10px;margin-bottom: 5px;">To Array</button><br>
                    <div style="display: inline-block;background-color: white;border-radius: 5px;padding: 10px 10px;">
                        <dataEditor @dataChanged="dataEDTchanged" :key-name-or-index="'groupBy'" :data="data.statement.groupBy"></dataEditor>
                    </div>
                </div>
                <p v-if="data.warningText!=''" style="color: red;margin-bottom: 20px;">{{ data.warningText }}</p>
                <v-btn @click="exe" variant="text" style="margin-bottom: 20px;">执行</v-btn><br>
                <div v-if="data.showre" style="padding: 10px 10px;background-color: white;border-radius: 5px;display: inline-block;">
                    <dataEditor :data="data.re" :read-only="true"></dataEditor>
                </div>
                <div style="width: 100%;height: 60px;">

                </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import tool from '@/utlis/tool'
  import config from '@/config'
  import dataEditor from "@/components/dataEditor.vue";
  import axios from "axios";
  
  export default {
    components:{
      dataEditor
    },
    name: '',
    data() {
      return {
        data:{
          statement:{
            method:'insert',
            table:'',
            values:[],
            conditions:{},
            set:{},
            columns:[],
            sortBy:[],
            pageSize:[],
            groupBy:[]
          },
          show:true,
          warningText:'',
          re:undefined,
          showre:false,
        }
      }
    },
  
    methods: {
        dataEDTchanged(e){
            this.data.statement[e.keyNameOrIndex] = e.data
            
        },
        async exe(){
            this.data.warningText = ''
            this.data.statement.token = this.bgData.loginedAdminInfo.token
            let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/bg/dboperator/statement',this.data.statement)
            if(re.status==1){
                this.data.re = re.results
                this.data.showre = false
                setTimeout(() => {
                    this.data.showre = true
                }, 1);
            }else{
                this.data.warningText = re.content
            }
        },
        valueChanged(){
        this.data.show = false
        setTimeout(() => {
            this.data.show = true
        }, 1);
        }
    },
  
    //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
    mounted() {
        
    },
  
    props: {
      appData:undefined,
      bgData:undefined
    },
  
    //监听属性 类似于data概念",
    computed: {},
  
    //监控data中的数据变化",
    watch: {},
  
    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
    created() {
    },
  
    //生命周期 - 挂载之前",html模板未渲染
    beforeMount() {
    },
  
    //生命周期 - 更新之前",数据模型已更新,html模板未更新
    beforeUpdate() {
    },
  
    // 生命周期 - 销毁之前调用
    beforeDestroy() {
    },
  
    //生命周期 - 更新之后",数据模型已更新,html模板已更新
    updated() {
    },
  
    //生命周期 - 销毁完成"
    destroyed() {
    },
  
    //如果页面有keep-alive缓存功能，这个函数会触发",
    activated() {
    }
  }
  </script>
  
  <style scoped>
  
  </style>